<template>
    <div class="edu-page-warp">
        <condition-card v-if="!isStudent" label-width="120px" @reset="reset" @search="onSubmit">
            <el-col :span="8">
                <el-form-item :label="$t('label.nowGrade')">
                    <el-date-picker
                        v-model="queryForm.grade"
                        :clearable="false"
                        :placeholder="$t('message.plzSelect')"
                        type="year"
                        value-format="yyyy"
                        style="width: 100%"
                        @change="handleGradeChanged"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('label.major')">
                    <el-select
                        v-model="queryForm.professionCode"
                        style="width:100%"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="(item, index) in options.major"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="考核地点">
                    <el-input v-model="queryForm.address" maxlength="50" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="考核时间">
                    <el-date-picker
                        v-model="queryForm.time"
                        :start-placeholder="$t('message.startTime')"
                        :end-placeholder="$t('message.endTime')"
                        type="datetimerange"
                        range-separator="至"
                    />
                </el-form-item>
            </el-col>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">学生考核安排查询</div>
            <el-row v-if="!isStudent" style="margin-bottom:8px">
                <el-col :span="6">
                    <el-input
                        v-model="queryForm.keyword"
                        :placeholder="$t('ElecPE.studentNameOrCode')"
                        style="width:200px"
                        @keyup.enter.native="onSubmit"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        />
                    </el-input>
                </el-col>
                <el-col :span="18">
                    <el-button class="float-right" @click="onExport">
                        {{ $t('message.export') }}
                    </el-button>
                </el-col>
            </el-row>
            <edu-table
                ref="mainTable"
                :url="getUrl()"
                :order="false"
                :selection="!isStudent"
                @selection-change="handleSelectionChange"
            >
                <el-table-column :label="$t('label.stuCode')" width="100" prop="studentId" />
                <el-table-column
                    :label="$t('label.stuName')"
                    width="180"
                    prop="studentName"
                    show-overflow-tooltip
                />
                <el-table-column :label="$t('label.grade')" width="80" prop="grade" />
                <el-table-column
                    :label="$t('label.major')"
                    width="160"
                    prop="professionName"
                    show-overflow-tooltip
                />
                <el-table-column label="考试编号" width="140" align="center" prop="cardNumber" />
                <el-table-column label="考核场次" width="140" align="center">
                    <template slot-scope="scope">第{{ scope.row.number }}场</template>
                </el-table-column>
                <el-table-column label="考核地点" prop="address" show-overflow-tooltip />
                <el-table-column label="考核时间" width="320" align="center">
                    <template slot-scope="scope">
                        {{ getExamTime(scope.row) }}
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import * as APIs from 'common/src/api/preparatoryGraduation/enroll'
import { findCampusProfessionList } from 'common/src/api/culture/campusProfession'
import tools from 'common/src/views/underGraduationDesign/tools.js'
import mixin from 'common/src/mixins/index'
export default {
    name: 'PreparatoryExamPlan',
    mixins: [mixin],
    data() {
        return {
            defaultYear: new Date().getFullYear() - 1,
            queryForm: {
                grade: null,
                professionCode: null,
                address: null,
                time: [],
                keyword: null
            },
            options: {
                major: null
            },
            selectItems: null,
            isStudent: false
        }
    },
    mounted() {
        if (this.global.isStudent) {
            this.isStudent = true
        }
        this.queryForm.grade = this.defaultYear.toString()
        this.onSubmit()
        this.handleGradeChanged(this.queryForm.grade)
    },
    methods: {
        reset() {
            this.queryForm.grade = this.defaultYear.toString()
            this.queryForm.professionCode = null
            this.queryForm.address = null
            this.queryForm.time = []
            this.queryForm.keyword = null
            this.onSubmit()
            this.handleGradeChanged(this.queryForm.grade)
        },
        onSubmit() {
            let params = _.cloneDeep(this.queryForm)
            if (this.global.isStudent) {
                params.studentIds = [this.global.currentUser.uid]
            }
            if (params.time !== null && params.time.length > 0) {
                params.startTimeStr = moment(params.time[0]).format('YYYY-MM-DD HH:mm:ss')
                params.endTimeStr = moment(params.time[1]).format('YYYY-MM-DD HH:mm:ss')
            }
            this.$refs.mainTable.search(params)
        },
        handleGradeChanged(val) {
            this.queryForm.professionCode = null
            this.getMajors(val, res => {
                this.options.major = res.data.list.map(item => {
                    return {
                        label: `${item.professionName}(${item.professionCode})`,
                        value: item.professionCode
                    }
                })
            })
        },
        getMajors(val, fn) {
            findCampusProfessionList({
                grade: val,
                inUsed: '0',
                projId: '1',
                pageNum_: 1,
                pageSize_: 1000
            }).then(res => {
                if (res.code === 200 && typeof fn === 'function') {
                    fn(res)
                }
            })
        },
        getUrl() {
            return APIs.getExamPlanStudentByPage()
        },
        getExamTime(row) {
            return `${row.startTime} 至 ${row.endTime}`
        },
        handleSelectionChange(val) {
            this.selectItems = val
        },
        onExport() {
            let params = _.cloneDeep(this.queryForm)
            if (this.selectItems !== null && this.selectItems.length > 0) {
                params.studentIds = this.selectItems.map(item => item.studentId)
            }
            APIs.getExamPlanStudentExcel(params).then(res => {
                if (res.code === 200) {
                    tools.downloadFile(res.data.key, '学生考核安排查询.xls', null, this)
                }
            })
        }
    }
}
</script>
